{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px}
	.government_institutions_bg{
		background-image: url(__TEMPLATE_STATIC__/government_institutions_bg.jpg);
		background-repeat: no-repeat;
		background-position-x:center;
		background-size: auto 600px;
		background-color: #F8F8F8;
		padding-top: 80px;
	}
	.text-white .el-tabs__item{color: #fff;}
	.el-tabs__nav-wrap::after{display: none;}
	.el-tabs__header{margin-bottom: 1px;}
	.rounded-0 .el-textarea__inner{border-radius: 0;}
	.search .el-input__inner{border-left: 0;}
	.find-border-top-0 .border-top:nth-of-type(1){border-top: 0 !important;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="government_institutions_bg">
	<div class="pt-5">
		<div class="container-xl pt-5">
			<div class="search w-75 mx-auto py-5">
				<el-form @submit.native.prevent="sendSearch">
					<el-input placeholder="请输入关键字" v-model="search.key" class="input-with-select"
					clearable>
						<i slot="prepend" class="el-icon-search"></i>
					    <el-button native-type="submit" slot="append">搜资讯</el-button>
					</el-input>
				</el-form>
			</div>
		</div>
		<div class="container-xl">
			<div class="bg-white flex py-3">
				<div class="flex-1"></div>
				<a :href="getSearchUrl('')" class="py-3 mx-5 font-weight-bold border-bottom border-lg {empty name=":request()->get('status')"}text-primary border-primary{else/}text-dark border-white{/empty}">全部</a>
				<a :href="getSearchUrl(v.value)" class="py-3 mx-5 font-weight-bold border-bottom border-lg" :class="v.value==search.alias_status?'text-primary border-primary':'text-dark border-white'" v-for="v in statusalias">{{v.title}}</a>
				<div class="flex-1"></div>
			</div>
		</div>
	</div>
	<div class="container-xl pb-3">
		<div class="bg-white pl-4 shadow">
			{notempty name="Data"}
			{volist name="Data" id="v"}
			<div class="flex flex-center py-4 border-bottom">
				{notempty name="v.status_alias"}
				<el-tag type="{$v.status_alias.type}" class="mr-3" size="mini">{$v.status_alias.title}</el-tag>
				{/notempty}
				<div class="flex-1">
					<a href="/article/content/{$v.id}.html" class="text-dark" target="_blank"><span class="{$v.cla}">{$v.title}</span></a>
				</div>
				<div class="text-secondary">{$v.start_time|date="Y/m/d"}</div>
				<div class="text-secondary pl-2 w-80px"><i class="el-icon-view mr-1"></i>{$v.view}</div>
			</div>
			{/volist}
			<div class="text-center mt-3 bg-white py-3">
				{$Data->render()|raw}
			</div>
			{else/}
			<div class="py-5 empty-text">暂无数据</div>
			{/notempty}
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var statusalias={xycms:statusalias name="article/status_alias" serialize="json"/};
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			statusalias:statusalias,
			feedback:XYBase.feedback,
			search:{
				alias_status:{notempty name=":request()->get('status')"}{:request()->get('status')}{else/}0{/notempty},
				key:'{notempty name=":request()->get('key')"}{:request()->get('key')}{/notempty}'
			},
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			getSearchUrl(status){
				return '/article/government_institutions.html?status='+status+'&key='+this.search.key;
			},
			sendSearch(){
				window.location.href='/article/government_institutions.html?status='+this.search.alias_status+'&key='+this.search.key
			},
			changeTabs(val,oldVal){
				window.location.href='/article/type/'+val+'.html';
			}
		})
	});
</script>
{/block}